<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招聘数据可视化分析系统 - 数据统计</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <div class="dashboard">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>招聘数据可视化分析系统</h2>
            </div>

            <!-- 用户信息卡片 -->
            <div class="user-profile">
                <div class="user-avatar">
                    <img src="https://via.placeholder.com/60x60/4A90E2/FFFFFF?text={{ session.user.username[0]|upper }}"
                        alt="用户头像">
                </div>
                <div class="user-info">
                    <p class="user-greeting">欢迎回来</p>
                    <p class="username">{{ session.user.username }}</p>
                </div>
                <form action="{{ url_for('logout') }}" method="post" class="logout-form">
                    <button type="submit" class="logout-btn">退出登录</button>
                </form>
            </div>

            <!-- 导航菜单 -->
            <nav class="sidebar-nav">
                <ul>
                    <li><a href="{{ url_for('home') }}" class="nav-item">
                            <span class="nav-icon">🏠</span>
                            <span class="nav-text">首页</span>
                        </a></li>
                    <li><a href="{{ url_for('profile') }}" class="nav-item">
                            <span class="nav-icon">👤</span>
                            <span class="nav-text">个人中心</span>
                        </a></li>
                    <li><a href="{{ url_for('data_management') }}" class="nav-item">
                            <span class="nav-icon">💼</span>
                            <span class="nav-text">数据管理</span>
                        </a></li>
                    <li><a href="{{ url_for('statistics') }}" class="nav-item active">
                            <span class="nav-icon">📊</span>
                            <span class="nav-text">数据统计</span>
                        </a></li>
                    <li><a href="{{ url_for('charts') }}" class="nav-item">
                            <span class="nav-icon">📈</span>
                            <span class="nav-text">可视化图表</span>
                        </a></li>
                </ul>
            </nav>
        </div>
        <div class="main-content">
            <div class="main-content-inner">
                <h2 class="page-title">数据统计</h2>
                <div class="page-content">
                    {% if error %}
                    <div class="error-message">{{ error }}</div>
                    {% else %}
                    <!-- 城市职位分布统计 -->
                    <div class="stats-section">
                        <h3>城市职位分布统计</h3>
                        <div class="stats-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>城市</th>
                                        <th>职位数量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for city, count in city_stats %}
                                    <tr>
                                        <td>{{ city }}</td>
                                        <td>{{ count }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 学历要求统计 -->
                    <div class="stats-section">
                        <h3>学历要求统计</h3>
                        <div class="stats-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>学历要求</th>
                                        <th>职位数量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for education, count in education_stats %}
                                    <tr>
                                        <td>{{ education }}</td>
                                        <td>{{ count }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 工作经验要求统计 -->
                    <div class="stats-section">
                        <h3>工作经验要求统计</h3>
                        <div class="stats-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>经验要求</th>
                                        <th>职位数量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for experience, count in experience_stats %}
                                    <tr>
                                        <td>{{ experience }}</td>
                                        <td>{{ count }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</body>

</html>